<template>

	<view class="container">

		<view style="
		 background: linear-gradient(to bottom,#4A9BFF 0%,#3988FD 50%, #1262E4 100%);
		height: 194px;
		padding-top: 10px;
		padding-left: 10px;">
			<uni-icons type="left" size="20" color="#fff" @click="goToBack"></uni-icons>
			<text style="color: #fff; font-size: 16px;font-weight: bold; margin-left: 130px;">详情</text>
		</view>
		<view class="content-up">
			<view class="title">
				<text>维修信息</text>
			</view>
			<view class="content-up-list">
				<uni-group>
					<view>维修单号：787239</view>
					<view>车主姓名：张三</view>
					<view>联系方式：1786898980
						<image class="photo-one" src="../../../static/phone.png"></image>
					</view>
					<view>维修方式：上门取车/到店维修</view>
					<view>取车位置:山阳区32号
						<image class="photo-two" src="../../../static/address.png"></image>
					</view>
					<view>预约日期:2022/11/10 11:00</view>
					<view>提交日期:2022/11/08 12:34</view>
				</uni-group>
			</view>
		</view>
		<view class="content-top">
			<view class="title">
				<text>车辆信息</text>
			</view>
			<view class="content-up-list">
				<uni-group>
					<view>车辆类型:大客车</view>
					<view>车牌号:豫145323</view>
					<view>整车照片：

					</view>
					<image class="photoview" src="../../../static/1111.jpg"></image>
					<view>维修部位照片：</view>
					<view class="image-container">
						<image class="photoview" src="../../../static/1111.jpg"></image>
						<image class="photoview" src="../../../static/1111.jpg"></image>
						<image class="photoview" src="../../../static/1111.jpg"></image>
					</view>
				</uni-group>
			</view>

		</view>
		<button type="primary" @click="dialogToggle('info')"
			style="border-radius: 20px; background-color: #999; margin-top: 20px;  width: 300px;">已到场</button>
		
		<view style="height: 20px;">
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
			}
		},
		methods: {
			goToBack() {
				uni.navigateTo({
					url:'/pages/repairTask/repairTask'
				})
			},
		}
	}
</script>

<style lang="scss">
	.button {

		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.box-bg {
		margin-top: 0px;
		z-index: 1;
	}


	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;

	}

	.content-up {
		height: 300px;
		background-color: #fff;
		margin: -130px 10px 0; //上，左右，下
		border-radius: 15px;
		padding: 14px 20px;
		margin-bottom: 20px;
	}

	.title {
		align-items: center;
		border-bottom: 2px solid #ccc;
		padding: 8px;
		font-size: 16px;
		font-weight: bold;
	}

	.content-up-list {
		margin-top: -10px;
	}

	.content-up-list view {
		padding: 5px;
		margin-left: -8px;
	}

	.content-top {
		height: 420px;
		background-color: #fff;
		margin: 20px 10px 0; //上，左右，下
		border-radius: 15px;
		padding: 14px 20px;

	}

	.submit {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 20px;
	}

	.submit-o {
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 20px;
	}

	.submit-t {
		font-size: 14px;
		padding-bottom: 40px;
	}


	.content-top image {
		width: 100px;
		height: 100px;
	}

	.photo-one {
		width: 20px;
		height: 20px;
		margin-left: 100px;
		padding-bottom: -10px;
	}

	.photo-two {
		width: 20px;
		height: 20px;
		margin-left: 120px;
		padding-bottom: -10px;
	}

	.image-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 在主轴上分配间距 */
		align-items: center;
		gap:4px;
	}

	.image-container .photoview {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

	.photoview {
		width: 100px;
		height: 100px;
	}
</style>